<template>
  <div class="padding w-full h-full overflow-auto">
    <div>
      <div class="search-form">
        <el-form inline>
          <year-month-picker
            v-model="time"
            :allow-date="false"
          ></year-month-picker>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="clickSearch">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="grid-content">
        <grid-item-one :data="gridItemOneData" title="能源消费情况分析"></grid-item-one>
        <div class="horr">
          <grid-item-two :data="gridItemTwoData"></grid-item-two>
          <grid-item-three ref="fakeGap" :data="gridItemThreeData"></grid-item-three>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import GridItemOne from './grid-item-one';
import GridItemTwo from './grid-item-two';
import GridItemThree from './grid-item-three';
import YearMonthPicker, { getTimeTypeFromTime } from '@/components/year-month-picker';

import MixinGridItemOne from './mixin-grid-item-one';
import MixinGridItemTwo from './mixin-grid-item-two';
import MixinGridItemThree from './mixin-grid-item-three';

import mixinFakeGap from '@/mixins/mixin-fake-gap';

export default {
  name: 'energy-efficiency-analysis-consumption-construct',
  mixins: [MixinGridItemOne, MixinGridItemTwo, MixinGridItemThree, mixinFakeGap],
  components: {
    GridItemOne,
    GridItemTwo,
    GridItemThree,
    YearMonthPicker
  },
  props: {
    /** 企业端”能源消费结构分析“复用次页面 */
    isEp: {
      type: Boolean,
      default: false
    },
    enterpriseId: [String, Number]
  },
  data() {
    return {
      loading: false,
      time: '',
    };
  },
  computed: {
    timeType() {
      return getTimeTypeFromTime(this.time);
    }
  },
  updated () {
    this.fixFakeGap('marginLeft')
  },
  mounted () {
    this.getAllData();
  },
  methods: {
    getParams () {
      return {
        time: this.time,
        timeType: this.timeType,
        enterpriseId: this.enterpriseId,
      }
    },
    clickSearch() {
      this.getAllData();
    },
    async getAllData () {
      this.loading = true;
      await this.getGridItemOneData();
      await this.getGridItemTwoData();
      await this.getGridItemThreeData();
      this.loading = false;
    },
  }
};
</script>

<style lang="scss" scoped>
@import '@/assets/style/variable.scss';

.search-form {
  ::v-deep .el-form-item {
    margin-bottom: 0;
  }
}
.grid-content {
  margin-top: $gutter;
  ::v-deep .content-block {
    border-radius: 4px;
    background: white;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    .info-content {
      flex: 1;
      overflow: auto;
    }
  }
  .horr {
    margin-top: $gutter;
    display: flex;
    gap: $gutter;
  }
  ::v-deep .block-half-1 {
    width: calc(100% - 560px - $gutter);
  }
  ::v-deep .block-half-2 {
    width: 560px;
  }
  ::v-deep .info-head {
    padding: 20px $gutter 0 $gutter;
    font-size: 16px;
    box-sizing: border-box;
  }
}
</style>
